<template>
    <div class="nav">
        <div class="router">
            <ul>
                <li><RouterLink :to="{path: '/Hello'}" active-class="active">第一页</RouterLink></li>
                <li><RouterLink :to="{path: '/Game'}" active-class="active">第二页</RouterLink></li>
                <li><RouterLink :to="{path: '/Love'}" active-class="active">第三页</RouterLink></li>
            </ul>
        </div>
        <div class="show">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script setup lang="ts" name="Nav">
</script>
<style scoped>
    .router{   
        ul{
            display: flex;
            justify-content: space-around;
            li{
                list-style: none;
                border: 1px solid black;
                font-size: 20px;
                font-weight: 700;
            }
        }
    }
    .show{
        border-radius: 10px;
        width: 1000px;
        height: 500px;
        background-color: #ddd;
        border: 2px solid black;
        margin: 20px auto;
        overflow: hidden;
    }
    .active{
        color: blue;
        background-color: red;
    }
</style>